<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Page as Tree</title>

    <script type="text/javascript">
    //<![CDATA[
        
        window.onload = function() {
            var theLinks = document.links;
            var theHrefs = document.getElementById("hrefs");

            for(var i=0; i<theLinks.length; i++) {
                var href = theLinks.item(i).href;
                var p = document.createElement("p");
                var txt = document.createTextNode(href);
                p.appendChild(txt);

                theHrefs.appendChild(p);
            }
        }

    //]]>

    </script>
    
</head>
<body>
    <div id="div1">
        <p>
            To better understang the document tree, consider a web page that has a head and body
                section, a page title, and the body contains a div element that
                itself contains a header and two paragraphs. One of the paragraphs contains <i> italicized text</i>
                ; the other has an image -- not an uncommon web page.
    
        </p>
    
        <p>
            Second paragraph with image. <img src="example9.12_fig01.png" alt="something">
        </p>

    </div>

</body>
</html>
